
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
    <script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        /**
         * 解决IE下不支持placeholder属性
         * author : MR chen  370489175@qq.com
         * Date: 16-01-19
         * 可以根据自己的需要去扩展
         * ps:写的很简单  根据自己的需求来  不喜勿喷
         */
        ;(function ($) {
            $.fn.placeholder = function (options) {
                var opts = $.extend({}, $.fn.placeholder.defaults, options);
                var isIE = document.all ? true : false;
                return this.each(function () {
                    var _this = this,
                            placeholderValue = _this.getAttribute("placeholder"); //缓存默认的placeholder值
                    if (isIE) {
                        _this.setAttribute("value", placeholderValue);
                        _this.onfocus = function () {
                            $.trim(_this.value) == placeholderValue ? _this.value = "" : '';
                        };
                        _this.onblur = function () {
                            $.trim(_this.value) == "" ? _this.value = placeholderValue : '';
                        };
                    }
                });
            };
        })(jQuery);
    </script>
    <style type="text/css">
        body {
            background-image:url(/assets/images/login.jpg);
            background-position: center;
            background-repeat: no-repeat;
            background-attachment:fixed;
            font-family: "微软雅黑", Arial, Helvetica, sans-serif;
            min-width: 1000px;
            background-size:100% 100%;-moz-background-size:100% 100%;
        }
    </style>
</head>
<body>
<div class="login-interface">
    <div class="content">
        <div class="content-top">
            <p class="chinese-name">杭州消防设施监控管理平台</p>
        </div>
        <form class="content-bottom">
            <table>
                <tbody>
                <tr>
                    <td class="td-first-child"><span>用户名：</span></td>
                    <td class="td-last-child"><input id="username" type="text" name="" style="float: left" placeholder="请输入用户名" autocomplete="off"></td>
                </tr>
                <tr>
                    <td class="td-first-child"><span>密<span style="padding-left: 14px;"></span>码：</span></td>
                    <td class="td-last-child"><div><input id="password" type="password" name="" style="float: left" placeholder="请输入密码" autocomplete="off"></div></td>
                </tr>
                <tr>
                    <td class="td-first-child"><span>验证码：</span></td>
                    <td class="td-last-child">
                        <div class="verification-code">
                            <input id="magecode" type="text" name="" placeholder="请输入验证码" autocomplete="off">
                            <div><img id="getcode" onclick="getimgcode()" style="width: 100%;height: 100%;" src="" alt="验证码"/></div>

                        </div>

                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button onclick="Dologin();return false;">确认</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        changewin();
        getimgcode();
    })
    $(window).resize(function(){
        changewin();
    });
    function changewin(){
        var winHeight=0;
        if (window.innerHeight){
            winHeight = window.innerHeight;
        }else if ((document.body) && (document.documentElement.clientHeight)){
            winHeight = document.documentElement.clientHeight;
        }
        var topheight = winHeight/2 - 180;
        $('.content').attr("style", "top:" + topheight+'px');
    }

    $("input").placeholder();
    function getimgcode() {
        var randomnum = Math.random();
        var getimagecode = document.getElementById("getcode");
        getimagecode.src = "/sysmanage/GetVerifyimg.do?time="+randomnum;

    }
    function Dologin() {
        var txtcode = $('#username').val();
        var pws = $('#password').val();
        var vcode = $('#magecode').val();
        if (txtcode == "") {
            alert("请输入登录帐号");
            return;
        }
        if (pws == "") {
            alert("请输入登录密码");
            return;
        }
        if (vcode == "") {
            alert("请输入验证码");
            return;
        }
        jQuery.ajax({
            type: "POST",
            url: "/sysmanage/userlogin.do",
            async: false,
            "data": {
                "usercode": txtcode,
                "pws": pws,
                "vcode": vcode,
            },
            "cache": false,
            dataType: 'text',
            //"contentType": "application/json; charset=utf-8",
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(XMLHttpRequest.status);
                alert(textStatus);
            },
            success: function (data) {
                var data = JSON.parse(data);
                if (data.Message == "ok") {
                    window.location.href="/sysmanage/main.do";
                }
                else {
                    layer.msg("操作失败!(" + unescape(data.Content) + ")", {"time": 1000});
                    getimgcode();
                }

            }
        })
    }
</script>
</body>
</html>

